<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>淘宝精品.html</title>
    <script src="js/jquery-3.6.3.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
            text-decoration: none;
        }

        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        #center img {
            height: 120px;
            width: 200px;
            display: block;
        }

        ul {
            display: inline-block;
        }

        #left li,
        #right li {
            height: 30px;
            border: 1px solid rgb(191, 54, 54);
            text-align: center;
            line-height: 30px;
        }

        .floatLeft {
            float: left;
        }
    </style>
</head>

<body>
    <div class="clearfix" style="border: 1px solid red;">
        <ul id="left" class="floatLeft">
            <li><a href="#">标签7</a></li>
            <li><a href="#">标签2</a></li>
            <li><a href="#">标签3</a></li>
            <li><a href="#">标签4</a></li>
        </ul>

        <ul id="center" class="floatLeft">
            <li><img src="images/1.jpg" alt="图片未找到" /></li>
            <li style="display: none;">
                <img src="images/2.jpg" alt="图片未找到" />
            </li>
            <li style="display: none;">
                <img src="images/3.jpg" alt="图片未找到" />
            </li>
            <li style="display: none;">
                <img src="images/4.jpg" alt="图片未找到" />
            </li>
            <li style="display: none;">
                <img src="images/5.jpg" alt="图片未找到" />
            </li>
            <li style="display: none;">
                <img src="images/6.jpg" alt="图片未找到" />
            </li>
            <li style="display: none;">
                <img src="images/7.jpg" alt="图片未找到" />
            </li>
            <li style="display: none;">
                <img src="images/bg.jpg" alt="图片未找到" />
            </li>
        </ul>
        <ul id="right" class="floatLeft">
            <li><a href="#">标签5</a></li>
            <li><a href="#">标签6</a></li>
    <li><a href="#">标签7</a></li>
            <li><a href="#">标签8</a></li>
        </ul>
    </div>
</body>
<script>
    $(function () {
        let liCount = 4
        $('#left>li').mouseenter(function () {
            let index = $(this).index()
            $('#center>li').eq(index).show().siblings('li').hide()
        })
        $('#right>li').mouseenter(function () {
            let index = $(this).index()
            index += liCount
            $('#center>li').eq(index).show().siblings('li').hide()
        })
    })
</script>

</html>